import React from 'react';
import SelectType from 'views/component/selectType';
import { ShopApi } from 'js/api/shop';
import XDate from 'xdate';
import echarts from 'js/lib/echarts';
import $ from 'jquery';
import './flowHoliday.scss';
import moment from 'moment';
import { Popup, DatePicker, Button, Icon } from 'antd-mobile';
import { lunarCalendarDay } from 'js/utils/lunarCalendarDay';

var HOLIDAY_CODE = { 1: '元旦', 2: '春节', 3: '情人节', 4: '妇女节', 5: '清明节', 6: '劳动节', 7: '端午节', 8: '中秋节', 9: '国庆节', 10: '圣诞节' };
const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const monthType = ['上旬', '中旬', '下旬'];
const timeData = [{ id: 'hour', name: '时' }, { id: 'day', name: '日' }, { id: 'month', name: '月' }];
let chartFontSize = parseInt(window.fontSize / 4);
var HOLIDAY = [{ name: '元旦', value: 1, date: '0105', type: 1 }, { name: '春节', value: 2, date: '0110', type: 0 }, { name: '情人节', value: 3, date: '0216', type: 1 },
{ name: '妇女节', value: 4, date: '0310', type: 1 }, { name: '清明节', value: 5, date: '0404', type: 1 }, { name: '劳动节', value: 6, date: '0509', type: 1 },
{ name: '端午节', value: 7, date: '0507', type: 0 }, { name: '中秋节', value: 8, date: '0817', type: 0 }, { name: '国庆节', value: 9, date: '1009', type: 1 },
{ name: '圣诞节', value: 10, date: '1227', type: 1 }];

const SelectHoliday = React.createClass({
    getInitialState() {
        return { startDate: null, endDate: null }
    },
    onChange(type, date) {
        this.state[type] = date;
        this.setState(this.state)
    },
    onClick(item) {
        if (this.props.onChange) {
            this.props.onChange(item)
        }
        this.props.onClose();
    },
    render() {
        let holidayNode = HOLIDAY.map((item) => {
            let date = parseInt(this.props.year + item.date);
            if (item.type === 0) {
                if (date > parseInt(lunarCalendarDay.cDateString)) {
                    return;
                }
            } else {
                if (date > parseInt(lunarCalendarDay.DateString)) {
                    return;
                }
            }
            return <div className="item" onClick={this.onClick.bind(this, item)} key={item.value}>{item.name}</div>
        })
        return <div className="selecHoliday">
            {holidayNode}
        </div>
    }
});

const FlowHoliday = React.createClass({
    getInitialState() {
        return { year: new Date().getFullYear(), HolidayCode: 1, holidayFlowLoading: true, holidayAvgPotentialFlow: true }
    },
    componentDidMount() {
        this.getflowAveNumberData()
        this.getHolidayAvgPotentialFlowData()
    },
    getflowAveNumberData() {
        let query = {
            ShopId: this.props.shopId,
            HolidayCode: this.state.HolidayCode,
            flowDataType: this.props.flowDataType,
            Year: this.state.year,
            AreaTypeId: this.props.AreaTypeId,
            AreaId: this.props.AreaId,
            IndustryId: this.props.AreaId
        }
        this.setState({ holidayFlowLoading: true })
        ShopApi.getHolidayFlow(query, (data) => {
            this.setState({ holidayFlowLoading: false })
            this.setTraffiFlowDataEChart(data);
        });
    },
    getHolidayAvgPotentialFlowData() {
        let query = {
            ShopId: this.props.shopId,
            flowDataType: this.props.flowDataType,
            Year: this.state.year,
            EndHolidayCode: 10,
            AreaTypeId: this.props.AreaTypeId,
            AreaId: this.props.AreaId,
            IndustryId: this.props.AreaId
        }
        this.setState({ holidayAvgPotentialFlow: true })
        ShopApi.getHolidayAvgPotentialFlowData(query, (data) => {
            this.setState({ holidayAvgPotentialFlow: false })
            this.setTraffiFlowDataYearEChart(data);
        })
    },
    setTraffiFlowDataEChart(data) {
        var xAxisData = [],
            seriesData1 = [],
            seriesData2 = [],
            holidayCode = this.state.HolidayCode,
            holidayData = 0,
            holidayNum = 0;
        for (let i = 0; i < data.length; i++) {
            var d;
            if (data[i].HOLIDAYCODE !== '0') {
                d = new XDate(data[i].CDATE).toString('MM/dd\n') + HOLIDAY_CODE[data[i].HOLIDAYCODE];
                if (data[i].HOLIDAYCODE === (holidayCode + '')) {
                    holidayData += parseInt(data[i].CDATA);
                    holidayNum += 1;
                }
            } else {
                d = new XDate(data[i].CDATE).toString('MM/dd\nyyyy年');
            }
            xAxisData.push(d);
            if (data[i].CPEAK === 'True') {
                d = {
                    value: data[i].CDATA
                };
                seriesData1.push(d);
                seriesData2.push('-');
            } else {
                d = {
                    value: data[i].CDATA
                }
                if ((data[i + 1] && data[i + 1].CPEAK === 'True') || (data[i - 1] && data[i - 1].CPEAK === 'True')) {
                    seriesData1.push(d);
                    d = {
                        value: data[i].CDATA,
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#DE8370'
                                }
                            }
                        }
                    }
                } else {
                    seriesData1.push('-');
                }
                seriesData2.push(d);
            }
        }
        var option = {
            textStyle: {
                fontSize: chartFontSize
            },
            animation: false,
            grid: {
                width: '86%',
                left: '7%'
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    show: true,
                    interval: 0,
                    textStyle: {
                        color: '#9A9A9A',
                        fontSize: chartFontSize
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#3f4147'
                    }
                },
                data: xAxisData
            }],
            yAxis: [{
                type: 'value',
                axisLine: {
                    show: false,
                    onZero: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: false
            }],
            dataZoom: {
                type: 'inside',
                startValue: 28,
                endValue: 33
            },
            series: [{
                type: 'line',
                smooth: true,
                areaStyle: {
                    normal: {
                        color: '#f45955',
                        opacity: 0.4
                    }
                },
                lineStyle: {
                    normal: {
                        color: '#f45955',
                        width: 4
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#DE8370',
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#EB8966'
                    }
                },
                data: seriesData1
            }, {
                type: 'line',
                smooth: true,
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#ccc'
                        }
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#e5dd8c',
                        opacity: 0.4
                    }
                },
                lineStyle: {
                    normal: {
                        color: '#e5dd8c',
                        width: 4
                    }
                },
                data: seriesData2
            }]
        };
        if (this.refs.traffiFlowEChart) {
            this.traffiFlowEChart = echarts.init(this.refs.traffiFlowEChart);
            this.traffiFlowEChart.setOption(option);
        }
    },
    setTraffiFlowDataYearEChart(data) {
        var seriesData1 = [],
            seriesData2 = [],
            timeData = [];
        for (let i in data) {
            if (parseInt(data[i].HOLIDAYAVGDATA) !== 0) {
                if (data[i].HOLIDAYAVGDATA === '0') {
                    seriesData1.push('-');
                    seriesData2.push('-');
                } else {
                    seriesData1.push(data[i].HOLIDAYAVGDATA);
                    seriesData2.push(data[i].POTENTIAL);
                }
                timeData.push(HOLIDAY_CODE[data[i].HOLIDAYCODE]);
            }
        }
        var option = {
            textStyle: {
                fontSize: chartFontSize
            },
            animation: false,
            grid: [{
                top: '7%',
                height: '40%'
            }, {
                top: '53.8%',
                height: '40%',
            }],
            xAxis: [{
                type: 'category',
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    onZero: true
                },
                axisLabel: {
                    show: true,
                    interval: 0,
                    textStyle: {
                        color: '#9A9A9A',
                        fontSize: chartFontSize
                    }
                },

                data: timeData
            }, {
                gridIndex: 1,
                type: 'category',
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    onZero: true
                },
                axisLabel: {
                    show: false
                },
                data: timeData,
                position: 'top'
            }],
            yAxis: [{
                type: 'value',
                barWidth: 30,
                axisLine: {
                    show: false,
                    onZero: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: false,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#3f4147'
                    }
                },
                min: 0
            }, {
                gridIndex: 1,
                type: 'value',
                inverse: true,
                barWidth: 30,
                axisLine: {
                    show: false,
                    onZero: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#3f4147'
                    }
                },
                axisLabel: false,
                min: 0
            }],
            dataZoom: {
                type: 'inside',
                xAxisIndex: [
                    0, 1
                ],
                startValue: 0,
                endValue: 4
            },
            series: [{
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: '#ecc874'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#ecc874'
                        }
                    }
                },
                barWidth: 30,
                data: seriesData1
            }, {
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '#f78d65'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'bottom',
                        textStyle: {
                            color: '#f78d65'
                        }
                    }
                },
                barWidth: 30,
                data: seriesData2
            }]
        };

        this.traffiFlowDataYear = echarts.init(this.refs.traffiFlowDataYear);
        this.traffiFlowDataYear.setOption(option);
    },
    yearOnChange(date) {
        this.setState({ year: moment(date).year() })
        this.getflowAveNumberData()
        this.getHolidayAvgPotentialFlowData()
    },
    selectHoliday() {
        Popup.show(<SelectHoliday onClose={() => Popup.hide()} onChange={this.onChange} year={this.state.year} />);
    },
    onChange(item) {
        this.state.HolidayCode = item.value;
        this.setState({ HolidayCode: item.value })
        this.getflowAveNumberData()
        this.getHolidayAvgPotentialFlowData()
    },
    render() {
        return (
            <div id="flowHoliday" className="flowContent">
                <div className="flowHead">
                    <div className="title">节假日客流分析</div>
                </div>
                <div className="flex jc-end btn-line">
                    <div className="btn-select" onClick={this.selectHoliday}>节日选择:{HOLIDAY_CODE[this.state.HolidayCode]}<i className="icon-triangle"></i></div>

                    <DatePicker mode="year" maxDate={moment()} minDate={moment().subtract(11, 'years')} onChange={this.yearOnChange} className="right">
                        <div className="btn-select">年份:{this.state.year}<i className="icon-triangle"></i></div>
                    </DatePicker>

                </div>
                <div className="bottomTitle">节假日客流展示</div>
                {
                    this.state.holidayFlowLoading ? <div className="chart flex-center" key={1}><Icon type="loading" size={'md'} /></div>
                        : <div className="chart flex-center" ref='traffiFlowEChart' key={2}></div>
                }
                <div className="flex-center bottomCon">
                    <div className="flex-g-1 flex-center"><span className="icon icon1"></span>节假日辐射客流</div>
                    <div className="flex-g-1 flex-center"><span className="icon icon2"></span>平日客流</div>
                </div>
                <div className="bottomTitle">节假日爆发里指数分析</div>
                {
                    this.state.holidayAvgPotentialFlow ? <div className="traffiFlowDataYear flex-center" key={3}>
                        <Icon type="loading" size={'md'} />
                    </div> : <div className="traffiFlowDataYear flex-center" ref='traffiFlowDataYear' key={4}></div>
                }
                <div className="flex-center bottomCon">
                    <div className="flex-g-1 flex-center"><span className="icon icon3"></span>平均单日客流</div>
                    <div className="flex-g-1 flex-center"><span className="icon icon4"></span>爆发力指数</div>
                </div>
            </div>
        );
    }
})

module.exports = FlowHoliday;